import { Button, Input, Message, Modal } from "@arco-design/web-react";
import { useContext, useEffect, useState } from "react";
import { ChatContext } from "..";
import { Textarea } from "@arco-design/mobile-react";
import http from "../../../http";
import { useDispatch } from "react-redux";
import { fetchGroupInfo } from "../../../store/features/group";

export const GroupNotice = () => {
    const { setGroupDrawerVisible,groupNoticeVisible, setGroupNoticeVisible, tragetId, groupInfo,setVisibleGroup } = useContext(ChatContext);
    const [edit, setEdit] = useState(false);

    const [textValue, setTextValue] = useState('');

    const handleTextChange = (event: any) => {
        setTextValue(event.target.value);
    };


   const dispatch =  useDispatch();
    const handleCompleteClick = () => {
       const fetchData = async ()=> {
         const respones =   await http.get(`/group/notice/create?groupId=${groupInfo.groupId}&content=${textValue}`)
          Message.success("修改成功");
          setGroupNoticeVisible(false);
          setGroupDrawerVisible(false);
          dispatch(fetchGroupInfo(groupInfo.groupId))
       }
       fetchData();
    };


    useEffect(()=>{
        if(groupInfo){
            if(groupInfo.notice){
                setTextValue(groupInfo.notice.content);
            }
        }
       
    },groupInfo)


    return <div>
        {
            groupInfo && <Modal
                style={{ top: '-3%' }}
                className="shadow-2xl w-[350px] h-[400px] border border-gray-100 overflow-hidden rounded-xl relative"
                visible={groupNoticeVisible}
                onOk={() => setGroupNoticeVisible(false)}
                onCancel={() => {
                    setGroupNoticeVisible(false);
                }}

                footer={null}
                title={null}
            >


                <div className="text-gray-500 text-[14px] flex flex-row justify-center mt-[13px]">{`"${groupInfo.groupName}" 的群公告`}</div>
                {

                    edit ?
                        <div>
                            <textarea
                                placeholder='请输入'
                                className="w-full h-[300px] resize-none outline-none p-[12px] m-0"
                                value={textValue}
                                onChange={handleTextChange}
                            />
                            <div className="w-[350px] flex flex-row  justify-center space-x-7">
                                <Button onClick={() => { setGroupNoticeVisible(false); setEdit(false) }} className="  w-[100px] my-2"><span className="text-[#23C343] font-bold">取消</span></Button>
                                <Button onClick={handleCompleteClick} className=" w-[100px] my-2"><span className="text-[#23C343] font-bold">完成</span></Button>
                            </div>
                        </div>

                        :

                        <div>


                            <div className="h-[310px] w-[340px] whitespace-normal p-[12px] overflow-y-scroll">
                                {groupInfo.notice &&groupInfo.notice.content }
                            </div>
                            <div className="w-[350px] flex flex-row  justify-center">
                                <Button onClick={() => setEdit(true)} className=" absolute  w-[100px] my-2"><span className="text-[#23C343] font-bold">编辑</span></Button>
                            </div>
                        </div>

                }
            </Modal>
        }
    </div>
}